<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <!--<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">-->
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <!--<link rel="stylesheet" href="http://localhost/layui/css/layui.css" media="all">!-->
    <style>

        body {
            background-image: url("../static/images/login.jpg");
            background-size: cover;
            background-attachment: fixed;
        }

        body, html {
            height: 100%
        }

        #LAY-user-login, .layadmin-user-display-show {
            display: block !important
        }

        .layadmin-user-login {
            position: relative;
            left: 0;
            top: 0;
            padding: 110px 0;
            min-height: 100%;
            box-sizing: border-box
        }

        .layadmin-user-login-main {
            width: 375px;
            margin: 0 auto;
            box-sizing: border-box;
            border: #009f95 2px solid;
            border-radius: 10px
        }

        .layadmin-user-login-box {
            padding: 20px;
        }

        .layadmin-user-login-header h2 {
            margin-bottom: 10px;
            font-weight: 300;
            font-size: 30px;
            color: #000
        }

        .layadmin-user-login-header p {
            font-weight: 300;
            color: #999
        }

        .layadmin-user-login-body .layui-form-item {
            position: relative
        }

        .layadmin-user-login-icon {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2
        }

        .layadmin-user-login-body .layui-form-item .layui-input {
            padding-left: 38px
        }

        .layadmin-user-login-codeimg {
            max-height: 38px;
            width: 100%;
            cursor: pointer;
            box-sizing: border-box
        }

        .layadmin-user-login-other {
            position: relative;
            font-size: 0;
            line-height: 38px;
            padding-top: 20px
        }

        .layadmin-user-login-other > * {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            font-size: 14px
        }

        .layadmin-user-login-other .layui-icon {
            position: relative;
            top: 2px;
            font-size: 26px
        }

        .layadmin-user-login-other a:hover {
            opacity: .8
        }

        .layadmin-user-jump-change {
            float: right
        }

        .layadmin-user-login-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            line-height: 30px;
            padding: 20px;
            text-align: center;
            box-sizing: border-box;
            color: rgba(0, 0, 0, .5)
        }

        .layadmin-user-login-footer span {
            padding: 0 5px
        }

        .layadmin-user-login-footer a {
            padding: 0 5px;
            color: rgba(0, 0, 0, .5)
        }

        .layadmin-user-login-footer a:hover {
            color: rgba(0, 0, 0, 1)
        }

        .layadmin-user-login-main[bgimg] {
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, .05)
        }

        .ladmin-user-login-theme {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center
        }

        .ladmin-user-login-theme ul {
            display: inline-block;
            padding: 5px;
            background-color: #fff
        }

        .ladmin-user-login-theme ul li {
            display: inline-block;
            vertical-align: top;
            width: 64px;
            height: 43px;
            cursor: pointer;
            transition: all .3s;
            -webkit-transition: all .3s;
            background-color: #f2f2f2
        }

        .ladmin-user-login-theme ul li:hover {
            opacity: .9
        }

        @media screen and (max-width: 768px) {
            .layadmin-user-login {
                padding-top: 60px
            }

            .layadmin-user-login-main {
                width: 300px
            }

            .layadmin-user-login-box {
                padding: 10px
            }
        }
    </style>
</head>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">

    <div class="layadmin-user-login-main">
        <!-- <div class="layadmin-user-login-box layadmin-user-login-header">
             <h2>登录模块</h2>
         </div>
     -->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this" style="margin-left: 60px;width: 230px"><h2>用 户 登 录</h2></li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                        <div class="layui-form-item">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                                   style="color: black"></label>
                            <input type="text" id="userName" lay-verify="required" placeholder="用户名" class="layui-input"
                                   autocomplete="off">
                        </div>
                        <div class="layui-form-item">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                                   style="color: black"></label>
                            <input type="password" id="userPass" lay-verify="required" placeholder="密码"
                                   class="layui-input" autocomplete="off">
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-row">
                                <div class="layui-col-xs7">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                                           style="color: black"></label>
                                    <input type="text" id="code" lay-verify="required" placeholder="图形验证码"
                                           class="layui-input" autocomplete="off">
                                </div>
                                <div class="layui-col-xs5">
                                    <div style="margin-left: 10px;">
                                        <img th:src="@{/imageVerify}" class="layadmin-user-login-codeimg"
                                             id="LAY-user-get-vercode"
                                             onclick="$(this).prop('src', '/imageVerify?' + Math.random())"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-trans layui-form-item layadmin-user-login-other">
                            <!--<label>其它账户</label>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>-->
                            <a id="forgetPss" style="color: #009f95" class="layadmin-user-jump-change layadmin-link">忘记密码？</a>
                        </div>

                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" id="loginBtn">登 入</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!--<div class="layui-trans layadmin-user-login-footer">
        <p>© All Rights Reserved</p>
    </div>-->
</div>

<strong th:text="${mess}" id="messInfo" style="display: none"></strong>
</body>
<!--<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>-->
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-3.1.0.js"></script>
<!--<script src="http://localhost/layui/layui.js"></script>
<script src="http://localhost/js/jquery-3.1.0.js"></script>-->
<script>
    layui.use(['element', 'layer', 'util', 'jquery'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.jquery;

        let mess = $("#messInfo").text();
        if (mess == null || mess === "") {
        } else {
            layer.msg(mess, {offset: '250px', time: 1500, anim: 6});
            $("#messInfo").text("");
        }

        /**
         *登录事件按钮
         */


        $("#loginBtn").click(function () {
            var ii = layer.load(0, {shade: false});
            setTimeout(function () {
                let userName = $("#userName").val();
                let userPass = $("#userPass").val();
                let code = $("#code").val();
                if (userName === "" || userName == null) {
                    layer.msg('输入用户名', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                if (userPass === "") {
                    layer.msg('输入密码', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                if (code === "") {
                    layer.msg('输入图片验证码', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                let url = "userLogin";
                let param = {userNumber: userName, userPass: userPass, code: code};
                $.post(url, param, function (mess) {
                    layer.close(ii);
                    if (mess === 1001 || mess === "1001") {
                        layer.msg('员工登入成功', {
                            offset: '250px'
                            , time: 1000
                        }, function () {
                            location.href = 'http://localhost:80/emp/empIndex'; //后台主页
                        });
                    } else if (mess === 1005 || mess === "1005") {
                        layer.msg('图片验证码错误', {offset: '250px', time: 1500, anim: 6});
                    } else if (mess === 1002 || mess === "1002") {
                        layer.msg('密码错误', {offset: '250px', time: 1500, anim: 6});
                    } else if (mess === 1003 || mess === "1003") {
                        layer.msg('用户不存在', {offset: '250px', time: 1500, anim: 6});
                    } else if (mess === 1006 || mess === "1006") {
                        layer.msg('验证码已过期，刷新验证码', {offset: '250px', time: 2500, anim: 6});
                    } else if (mess === 1007 || mess === "1007") {
                        layer.msg('你的账户已在其它设备登录,如不是本人操作，尽快修改密码', {offset: '250px', time: 1500, anim: 6});
                    } else if (mess === 1008 || mess === "1008") {
                        layer.msg('管理员登入成功', {
                            offset: '250px'
                            , time: 1000
                        }, function () {
                            location.href = 'http://localhost:80/index'; //后台主页
                        });
                    } else {
                        layer.msg('登录错误');
                    }
                });
            });
        });

        /*忘记密码*/
        $("#forgetPss").click(function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                area: ['420px', '420px'],
                content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                    '<div class="layui-col-md12"  id="showTemp" > ' +
                    '<div class="layui-col-md3" style="background-color: #009f95 ;height: 20px;" id="temp1"></div>' +
                    '<div class="layui-col-md3" style="height: 20px" id="temp-2"></div>' +
                    '<div class="layui-col-md3" style="height: 20px" id="temp-3"></div>' +
                    '<div class="layui-col-md3" style="height: 20px" id="temp-4"></div>' +
                    '</div>' +
                    '        <div class="layui-col-md12"  id="ques-box" style="margin-top: 20px">' +
                    '<input type="text" id="empNumber" placeholder="输入忘记密码的员工号" autocomplete="off" class="layui-input" style="border: #009f95 solid 1px">' +
                    '        </div>' +
                    '<div id="btn-div"><button class="layui-btn" style="float: right;margin-top: 20px" id="ok-btn">查询</button></div>' +
                    '    </div>',
                title: '忘记密码'
                , anim: 0
            });
            $("#ok-btn").click(function () {
                let empNumber = $("#empNumber").val();
                if (empNumber === null || empNumber === "") {
                    layer.msg('请输入员工号进行下一步', {offset: '250px', time: 2500, anim: 6});
                    return false;
                }
                let url = "getQuesByEmpNum";
                let param = {empNumber: empNumber};
                $.get(url, param, function (data) {
                    if (data === null || data === "") {
                        layer.msg('员工号不存在,有疑问请联系管理员！', {offset: '250px', time: 1500, anim: 6});
                    } else {
                        $("#temp-2").css("background-color", '#009f95');
                        let resInfo = '<div class="layui-form-item">\n' +
                            '                            <label  style="color: black">员工工号:</label>\n' +
                            '                            <label style="color: #009f95;margin-left: 20px"> ' + empNumber + '</label>\n' +
                            '                        </div>' +
                            '<div class="layui-form-item">\n' +
                            '                            <label  style="color: black">密保问题:</label>\n' +
                            '                            <label style="color: #009f95;margin-left: 20px"> ' + data + '</label>\n' +
                            '                        </div>' +
                            '<div class="layui-form-item">\n' +
                            '                            <label  style="color: black">请输入问题的答案进行下一步:</label><br><br>\n' +
                            '                            <input style="border: #009f95 solid 1px" type="text"  id="empAns" lay-verify="required" placeholder="在这里输入密码问题的答案" class="layui-input" autocomplete="off">\n' +
                            '                        </div>';
                        $("#ques-box").html(resInfo);
                        let btn = '<button class="layui-btn" style="float: right;margin-top: 20px" id="ans-btn">下一步</button>';
                        $("#btn-div").html(btn);
                    }
                });
                $('#del-box').delegate("#ans-btn", "click", function () {
                    let empAns = $("#empAns").val();
                    if (empAns === null || empAns === "") {
                        layer.msg('请输入问题答案进行下一步', {offset: '250px', time: 2500, anim: 6});
                        return false;
                    } else {
                        let url = "checkEmpAns";
                        let param = {empNumber: empNumber, empAns: empAns};
                        $.post(url, param, function (data) {
                            if (data === true || data === "true") {
                                $("#temp-3").css("background-color", '#009f95');
                                let resInfo = '<div class="layui-form-item ">\n' +
                                    '                <label><h2>设置一个新密码</h2><br>' +
                                    '<i class="layui-icon layui-icon-triangle-r" style="color: red;margin-left: 10px"></i>长度不能小于6位且必须同时包含大小写字母</label>\n' +
                                    '        </div>' +
                                    '<div class="layui-form-item layui-col-lg12">\n' +
                                    '                <input type="password" id="newPass" required  lay-verify="required" placeholder="长度不能小于6位且必须同时包含大小写字母" autocomplete="off" class="layui-input" style="border: #009f95 solid 1px" onkeyup="checkNewPass()">\n' +
                                    '            <br><span style="color: red" id="checkPass"></span>' +
                                    ' </div>' +
                                    '<div class="layui-form-item layui-col-lg12">\n' +
                                    '              <input type="password" id="newPassAgain" required  lay-verify="required" placeholder="再次输入密码" autocomplete="off" class="layui-input" style="border: #009f95 solid 1px" onkeyup="checkPassAgain()">\n' +
                                    '           <span style="color: red" id="checkPassAgain"></span>' +
                                    ' </div>';
                                $("#ques-box").html(resInfo);
                                let btn = '<button class="layui-btn" style="float: right;" id="update-btn">下一步</button>';
                                $("#btn-div").html(btn);
                            } else if (data === false || data === "false") {
                                layer.msg('答案不正确', {offset: '250px', time: 2500, anim: 6});
                            } else {
                                layer.msg('出错了,请联系管理员', {offset: '250px', time: 2500, anim: 6});
                            }
                        });
                    }
                });
                $('#del-box').delegate("#update-btn", "click", function () {
                    let newPass = $("#newPass").val();
                    if (!(checkNewPass() && checkPassAgain())) {
                        layer.msg('请按规则填写密码填写', {offset: '250px', time: 2500, anim: 6});
                        return false;
                    } else {
                        let url = "updateEmpPassByEmpNumber";
                        let param = {empNumber: empNumber, newPass: newPass};
                        $.post(url, param, function (data) {
                            if (data === true || data === "true") {
                                $("#temp-4").css("background-color", '#009f95');
                                let resInfo = '<div class="layui-fluid"><center><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe6af;</i><br>' +
                                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                                    '      找回密码成功，快去登录吧' +
                                    '    </div></center></div>';
                                $("#ques-box").html(resInfo);
                                let btn = '';
                                $("#btn-div").html(btn);
                            } else if (data === false || data === "false") {
                                layer.msg('新密码不能与原密码相同', {offset: '250px', time: 2500, anim: 6});
                            } else {
                                layer.msg('出错了,请联系管理员', {offset: '250px', time: 2500, anim: 6});
                            }
                        });

                    }

                });

            });
        });


    });


    function checkNewPass() {
        let newPass = $("#newPass").val();
        if (newPass.length < 6) {
            $("#checkPass").html("密码的长度不能小于6位");
            return false;
        } else {
            let rule1 = /[0-9]/;
            let rule2 = /[a-z]/;
            let rule3 = /[A-Z]/;
            if (rule1.test(newPass) && rule2.test(newPass) && rule3.test(newPass)) {
                $("#checkPass").html("");
                return true;
            } else {
                $("#checkPass").html("密码必须同时包含大小写字母和数字");
                return false;
            }
        }
    }

    function checkPassAgain() {
        let newPass = $("#newPass").val();
        let newPassAgain = $("#newPassAgain").val();
        if (newPassAgain === null || newPassAgain === "") {
            $("#checkPassAgain").html("请确认密码");
            return false;
        } else if (newPass === newPassAgain) {
            $("#checkPassAgain").html("");
            return true;
        } else {
            $("#checkPassAgain").html("两次密码不一致");
            return false;
        }
    }


</script>


</html>